<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="address=no">
    <title>conversation list demo</title>
    <link rel="stylesheet" href="../reset.css">
    <link rel="stylesheet" href="conversation-list.css">

    <script src="../lib/jquery-3.1.1.js"></script>
    <script src="../lib/vue-2.1.4.js"></script>
    <script src="//cdn.ronghub.com/RongIMLib-2.5.0.js"></script>


    <script src="../init.js"></script>
    <script src="conversation-list.js"></script>

</head>
<body>
<div id="conversationListPage">
    <component :is="stat.currentView" :stat="stat"></component>
</div>
</body>
<template id="conversationList">
    <div class="conversationList">
        <!--header-->
        <header class="header">
            <h2 class="title">{{stat.currentUserInfo.nickname}}</h2>
        </header>
        <!--header-->
        <!--chat-list-->
        <ul class="chat-list">
            <li class="chat-item" v-for="(item,index) in stat.conversationList">
                <!--<pre>{{stat.conversationList}}</pre>-->
                <div class="chat-item-portrait"><img :src="item.userInfo.portraitUri" class="rong-avatar-bd"></div>
                <div class="chat-item-name" v-if="item.conversationType === 1">{{item.userInfo.nickname}} :
                    {{item.latestMessage.content.content ||
                    '' }}
                </div>
                <div class="chat-item-name" v-if="item.conversationType === 3">{{item.userInfo.name}} :
                    {{item.latestMessage.content.content ||
                    '' }}
                </div>
                <div class="unread-count" v-if="item.unreadMessageCount">{{item.unreadMessageCount}}</div>
                <div class="remove-conversation" @touchend="removeConversation(item.conversationType,item.latestMessage.targetId , index)">&times;</div>
            </li>
        </ul>
        <!--chat-list-->
    </div>
</template>
<script type="text/javascript">

    //初始化
    var userInfo = {
        appKey: "82hegw5u8mqwx",
        token: "oUh0wcHH6E2LiuTpEKp/+jCvQwRQ4mI0ws9X674LamLVDfNK14vl8UoEcZT0otHeuyNsIi1T4wZ8UwVl0ZqyZA=="
    };
    var callbacks = {
        CONNECTED: function (instance) { //传入实例参数
            //获取会话列表
            instance.getConversationList({
                onSuccess: function (conversations) {
                    //处理会话列表
                    transConversations(conversations, function (translatedConversations) {
                        // 因 Demo 用户数据为 Mock 数据，过滤没有用户信息的会话，若数据完整可省略此项
                        translatedConversations = translatedConversations.filter((conversation) => {
                            return conversation.userInfo != null;
                        });
                        //渲染会话列表
                        renderConversationView(translatedConversations,instance);
                    })
                }
            }, null);

        },
        Success: function (id) {
        },
        Received: function (message) {
        }
    };
    init(userInfo, callbacks);
</script>
</html>